<template>
  <div>
    <el-form-item label="起始数字">
      <el-input-number v-model="localData.startNumber" controls-position="right" />
    </el-form-item>
    <el-form-item label="结果数字">
      <el-input-number v-model="localData.endNumber" controls-position="right" />
    </el-form-item>
    <el-form-item label="每秒读数">
      <el-input-number v-model="localData.duration" controls-position="right" />
    </el-form-item>
    <el-form-item label="文本大小">
      <el-input-number :min="1" v-model="localData.countStyle.fontSize" controls-position="right" />
    </el-form-item>
    <el-form-item label="文本颜色">
      <el-color-picker v-model="localData.countStyle.color" />
    </el-form-item>
    <el-form-item label="文本背景">
      <el-color-picker v-model="localData.countStyle.backgroundColor" />
    </el-form-item>
    <el-form-item label="文本样式">
      <el-checkbox v-model="localData.countStyle.bold" label="粗体"></el-checkbox>
      <el-checkbox v-model="localData.countStyle.italic" label="斜体"></el-checkbox>
      <el-checkbox v-model="localData.countStyle.underline" label="下划线"></el-checkbox>
    </el-form-item>
    <el-form-item label="对齐方式">
      <el-select v-model="localData.countStyle.align">
        <el-option label="左对齐" value="left" />
        <el-option label="居中对齐" value="center" />
        <el-option label="右对齐" value="right" />
      </el-select>
    </el-form-item>
    <el-form-item label="自定义样式">
      <el-input type="textarea" v-model="localData.customCssObj" placeholder="请输入css属性的键值对，多个键值对换行输入" />
    </el-form-item>
  </div>
</template>
  
  <script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'AnvilCountConfig',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    };
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal;
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal);
      },
      deep: true
    }
  }
});
</script>
  